<template>
  <div style="width: 100%;height: 100%;">
  <div style="display:flex;justify-content:flex-end">
    <div style="text-align: center;color:white;font-weight: 600;margin-right: 15%;font-size: 20px;">各省份{{ title.value }}</div>
    <div style="">
        <el-select v-model="value" placeholder="请选择" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
     </div>
  </div>
  <div class="map" id="map"></div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, watch } from "vue";
// import axios from 'axios';
import { map } from "../api/index.js";
import {chinamap} from '../assets/china.js'
import * as echarts from 'echarts'

export default {
  setup() {
    let mapData = chinamap;
    let max = 3000;
    let min = 100;
    const title = reactive({value:"票房贡献"})
    let Boxdata=
     [{name:'河南', value: 5,label:{fontWeight:"bolder"}}, 
      { name: '吉林', value: 75,label:{fontWeight:"bolder"} },
      { name: '山西', value: 50,label:{fontWeight:"bolder"} },
      { name: '江西', value: 80,label:{fontWeight:"bolder"} },
      { name: '陕西', value: 10,label:{fontWeight:"bolder"} },
      { name: '香港', value: 20,label:{fontWeight:"bolder"} },
      { name: '上海', value: 60,label:{fontWeight:"bolder"} },
      { name: '内蒙古', value: 10,label:{fontWeight:"bolder"} },
      { name: '台湾', value: 30,label:{fontWeight:"bolder"} },
      { name: '青海', value: 50,label:{fontWeight:"bolder"} },
      { name: '北京', value: 70,label:{fontWeight:"bolder"} },
      { name: '江苏', value: 10,label:{fontWeight:"bolder"} },
      { name: '福建', value: 30,label:{fontWeight:"bolder"} },
      { name: '甘肃', value: 40,label:{fontWeight:"bolder"} },
      { name: '辽宁', value: 80,label:{fontWeight:"bolder"} },
      { name: '黑龙江', value: 40,label:{fontWeight:"bolder"} },
      { name: '云南', value: 50,label:{fontWeight:"bolder"} },
      { name: '安徽', value: 40,label:{fontWeight:"bolder"} },
      { name: '浙江', value: 30,label:{fontWeight:"bolder"} },
      { name: '四川', value: 20,label:{fontWeight:"bolder"} },
      { name: '天津', value: 10,label:{fontWeight:"bolder"} },
      { name: '重庆', value: 15,label:{fontWeight:"bolder"} },
      { name: '河北', value: 50,label:{fontWeight:"bolder"} },
      { name: '海南', value: 50,label:{fontWeight:"bolder"} },
      { name: '贵州', value: 70,label:{fontWeight:"bolder"} },
      { name: '广东', value: 40,label:{fontWeight:"bolder"} },
      { name: '广西', value: 50,label:{fontWeight:"bolder"} },
      { name: '新疆', value: 30,label:{fontWeight:"bolder"} },
      { name: '澳门', value: 80,label:{fontWeight:"bolder"} },
      { name: '山东', value: 70,label:{fontWeight:"bolder"} },
      { name: '湖北', value: 50,label:{fontWeight:"bolder"} },
      { name: '湖南', value: 10,label:{fontWeight:"bolder"} },
      { name: '宁夏', value: 50,label:{fontWeight:"bolder"} },
      { name: '西藏', value: 15,label:{fontWeight:"bolder"} }];

      let showdata =[{name:'河南', value: 5,label:{fontWeight:"bolder"}}, 
      { name: '吉林', value: 75,label:{fontWeight:"bolder"} },
      { name: '山西', value: 50,label:{fontWeight:"bolder"} },
      { name: '江西', value: 80,label:{fontWeight:"bolder"} },
      { name: '陕西', value: 10,label:{fontWeight:"bolder"} },
      { name: '香港', value: 20,label:{fontWeight:"bolder"} },
      { name: '上海', value: 60,label:{fontWeight:"bolder"} },
      { name: '内蒙古', value: 10,label:{fontWeight:"bolder"} },
      { name: '台湾', value: 30,label:{fontWeight:"bolder"} },
      { name: '青海', value: 50,label:{fontWeight:"bolder"} },
      { name: '北京', value: 70,label:{fontWeight:"bolder"} },
      { name: '江苏', value: 10,label:{fontWeight:"bolder"} },
      { name: '福建', value: 30,label:{fontWeight:"bolder"} },
      { name: '甘肃', value: 40,label:{fontWeight:"bolder"} },
      { name: '辽宁', value: 80,label:{fontWeight:"bolder"} },
      { name: '黑龙江', value: 40,label:{fontWeight:"bolder"} },
      { name: '云南', value: 50,label:{fontWeight:"bolder"} },
      { name: '安徽', value: 40,label:{fontWeight:"bolder"} },
      { name: '浙江', value: 30,label:{fontWeight:"bolder"} },
      { name: '四川', value: 20,label:{fontWeight:"bolder"} },
      { name: '天津', value: 10,label:{fontWeight:"bolder"} },
      { name: '重庆', value: 15,label:{fontWeight:"bolder"} },
      { name: '河北', value: 50,label:{fontWeight:"bolder"} },
      { name: '海南', value: 50,label:{fontWeight:"bolder"} },
      { name: '贵州', value: 70,label:{fontWeight:"bolder"} },
      { name: '广东', value: 40,label:{fontWeight:"bolder"} },
      { name: '广西', value: 50,label:{fontWeight:"bolder"} },
      { name: '新疆', value: 30,label:{fontWeight:"bolder"} },
      { name: '澳门', value: 80,label:{fontWeight:"bolder"} },
      { name: '山东', value: 70,label:{fontWeight:"bolder"} },
      { name: '湖北', value: 50,label:{fontWeight:"bolder"} },
      { name: '湖南', value: 10,label:{fontWeight:"bolder"} },
      { name: '宁夏', value: 50,label:{fontWeight:"bolder"} },
      { name: '西藏', value: 15,label:{fontWeight:"bolder"} }];

      let numberdata =[{name:'河南', value: 5,label:{fontWeight:"bolder"}}, 
      { name: '吉林', value: 75,label:{fontWeight:"bolder"} },
      { name: '山西', value: 50,label:{fontWeight:"bolder"} },
      { name: '江西', value: 80,label:{fontWeight:"bolder"} },
      { name: '陕西', value: 10,label:{fontWeight:"bolder"} },
      { name: '香港', value: 20,label:{fontWeight:"bolder"} },
      { name: '上海', value: 60,label:{fontWeight:"bolder"} },
      { name: '内蒙古', value: 10,label:{fontWeight:"bolder"} },
      { name: '台湾', value: 30,label:{fontWeight:"bolder"} },
      { name: '青海', value: 50,label:{fontWeight:"bolder"} },
      { name: '北京', value: 70,label:{fontWeight:"bolder"} },
      { name: '江苏', value: 10,label:{fontWeight:"bolder"} },
      { name: '福建', value: 30,label:{fontWeight:"bolder"} },
      { name: '甘肃', value: 40,label:{fontWeight:"bolder"} },
      { name: '辽宁', value: 80,label:{fontWeight:"bolder"} },
      { name: '黑龙江', value: 40,label:{fontWeight:"bolder"} },
      { name: '云南', value: 50,label:{fontWeight:"bolder"} },
      { name: '安徽', value: 40,label:{fontWeight:"bolder"} },
      { name: '浙江', value: 30,label:{fontWeight:"bolder"} },
      { name: '四川', value: 20,label:{fontWeight:"bolder"} },
      { name: '天津', value: 10,label:{fontWeight:"bolder"} },
      { name: '重庆', value: 15,label:{fontWeight:"bolder"} },
      { name: '河北', value: 50,label:{fontWeight:"bolder"} },
      { name: '海南', value: 50,label:{fontWeight:"bolder"} },
      { name: '贵州', value: 70,label:{fontWeight:"bolder"} },
      { name: '广东', value: 40,label:{fontWeight:"bolder"} },
      { name: '广西', value: 50,label:{fontWeight:"bolder"} },
      { name: '新疆', value: 30,label:{fontWeight:"bolder"} },
      { name: '澳门', value: 80,label:{fontWeight:"bolder"} },
      { name: '山东', value: 70,label:{fontWeight:"bolder"} },
      { name: '湖北', value: 50,label:{fontWeight:"bolder"} },
      { name: '湖南', value: 10,label:{fontWeight:"bolder"} },
      { name: '宁夏', value: 50,label:{fontWeight:"bolder"} },
      { name: '西藏', value: 15,label:{fontWeight:"bolder"} }];

    let options=[{
          value: '1',
          label: '票房/万'
        }, {
          value: '2',
          label: '观影场次'
        }, {
          value: '3',
          label: '观影人次'
        }];
    let value=ref('1')
    async function getProvince() {
      let province = await map();
      for(var i=0;i<province.length;i++){
        if(province[i].provinceName=='内蒙古自治区' || province[i].provinceName=='黑龙江省'){
          province[i].provinceName=province[i].provinceName.slice(0,3)
        }
        else{
          province[i].provinceName=province[i].provinceName.slice(0,2)
        }
      }
      for(var i=0;i<province.length;i++){
         for(var j=0;j<province.length;j++){
           if(province[i].provinceName == Boxdata[j].name){
            Boxdata[j].value = province[i].boxOffice
           }
           if(province[i].provinceName == showdata[j].name){
            showdata[j].value = province[i].shows
           }
           if(province[i].provinceName == numberdata[j].name){
            numberdata[j].value = province[i].numbers
           }
         }
      }
      }

    watch(value, (newValue, oldValue) => {
       if(newValue =='1'){
          max = 3000
          min = 100
          title.value = '票房贡献'
          painter(Boxdata)   
       }
       if(newValue =='2'){
          max = 300000
          min = 3000
          title.value = '观影场次'
          painter(showdata)
       }
       if(newValue =='3'){
          max = 1800000 
          min = 20000
          title.value = '观影人次'
          painter(numberdata)
       }
    })

    onMounted(() => {
       painter(Boxdata)
    })

    function painter(data){
      getProvince().then(() => {
        echarts.registerMap("china", mapData);
        let myChart = echarts.init(document.getElementById("map"));
        myChart.setOption({
          visualMap: {
                min: min,
                max: max,
                itemWidth:10,
                itemHeight:80,
                text: ['高', '低'],
                realtime: false,
                calculable: true,
                inRange: {
                color: ['lightskyblue', 'yellow', 'orangered'],},
                top:'70%',
                left:'10%',
                textStyle:{
                  color:"white",
                  fontWeight:"bolder",
                  fontSize:"16",
                  fontFamily:"c",
                }
          },
          tooltip: {
            trigger: "item",
            textStyle:{
              fontFamily:'b',
              fontSize:"18"
            }
          },
          series: [
        {
          name: title.value,
          type: 'map',
          map: 'china',
          label: {
            show: true,
            fontWeight:'bolder',
            fontFamily:'c',
          },
          itemStyle: {
              areaColor: "#0099ff",
              borderColor: "#00ffff",
              shadowColor: "#000066",
              shadowBlur: 5,
              emphasis: {
                focus: "self",
              },
          },
          roam:false,
          zoom:1.4,
          center:[106,35],
          data: data,
          
          // 自定义名称映射
        },
      ]    
      })   
      });
    }
    return{
      options:options,
      value:value,
      title:title
    }
}
  }
</script>

<style>
.map {
  width: 100%;
  height: 100%;
}
</style>



